<template>
    <div style="text-align:left;">
        <!--订单信息-->
        <el-input v-model="aaa"></el-input>
        <div>
            <h5>订单信息</h5>
            <el-row>
                <el-col :span="8">订单编号：{{ orderData.orderNo }}</el-col>
                <el-col :span="8">下单时间：{{ orderData.orderTime }}</el-col>
                <el-col :span="8">商品数量：</el-col>
            </el-row>
            <el-row>
                <el-col :span="8">总金额：{{ orderData.orderAmount }}</el-col>
                <el-col :span="8">运费：0</el-col>
                <el-col :span="8">实付金额：0</el-col>
            </el-row>
            <el-row>
                <el-col :span="8">支付方式：</el-col>
                <el-col :span="8">订单状态：</el-col>
                <el-col :span="8"></el-col>
            </el-row>
        </div>

        <!--商品信息-->
        <div>
            <h5>商品信息</h5>
            <el-table :data="productData" style="width: 100%">
                <el-table-column label="图片" width="180">
                    <template slot-scope="scope">
                        <img :src="scope.row.image" style="width:50px;height:50px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="price" label="价格" width="180">
                </el-table-column>
                <el-table-column prop="number" label="数量" width="180">
                </el-table-column>
            </el-table>
        </div>

        <!--收件人信息-->
        <div>
            <h5>收件人信息</h5>
            <el-row>
                <el-col :span="8">收件人：</el-col>
                <el-col :span="8">电话：</el-col>
                <el-col :span="8">详细地址：</el-col>
            </el-row>
        </div>

        <!--物流信息-->
        <div>
            <h5>物流信息</h5>
            <el-row v-for="(item, index) in logisticData" :key="index">
                <el-col :span="5">{{ item.date }}</el-col>
                <el-col :span="19">{{ item.content }}</el-col>
            </el-row>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            orderData:{},
            productData: [
                { id: 1, name: '华为手机pro 14', image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', price: 6015.58, number: 1 },
                { id: 2, name: '小米手机pro 14', image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', price: 1500.58, number: 1 },
                { id: 3, name: '苹果手机pro 14', image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', price: 1455.58, number: 1 },
            ],
            logisticData: [
                { id: 1, date: '2023/7/7 12:25:58', content: '已接收' },
                { id: 2, date: '2023/7/7 13:25:58', content: '已打包' },
                { id: 3, date: '2023/7/7 14:25:58', content: '已出上海' },
                { id: 4, date: '2023/7/7 15:25:58', content: '已到北京' },
                { id: 5, date: '2023/7/7 16:25:58', content: '已签收' },
                { id: 6, date: '2023/7/7 17:25:58', content: '已确认' },
            ],
            aaa:'',
            bbb:{
                aaa:''
            }
        }
    },
    watch:{
        // aaa(newValue,oldValue){
        //     console.log(newValue,oldValue);
        // }
        'bbb.aaa'(neww,okd){
            console.log(neww,okd);
        },
        aaa:{
            handler(newValue,oldValue){
                console.log(newValue,oldValue);
            },
            deep:true
        }
    },
    mounted(){
        this.onloadData()
    },
    methods:{
        onloadData(){
            let url ='http://localhost:5068/month/detail?orderNo='+this.$route.query.orderNo
            this.$http.get(url).then(res=>{
                this.orderData = (res.data.master)[0]
                this.productData = res.data.detail
            })
        }
    }
}
</script>